<template>
	<view>
		<u-popup v-model="popupCard" mode="center" border-radius="20" @close="close">
			<view class="popup">
				<view class="pop-title flex-row justify-center">
					备注
				</view>
				<view class="flex-row justify-between">
					
					<view class="pop-card-num flex-row justify-center items-center">
						<input type="text"  :value="remark" @input="handleInput" placeholder="输入备注" placeholder-class="pop-placeholder"
							class="pop-input" />
					</view>
				</view>
				<view class="pop-bottom flex-row justify-between">
					<view @click="submit" class="pop-bt-btn1">
						确定
					</view>
					<!-- <view v-if="isLoading" class="pop-bt-btn1">
						确定
					</view> -->
					<view @click="close" class="pop-bt-btn2">
						取消
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			remark: {
				type: String,
				default: false
			}
		},
		data() {
			return {
				popupCard: false,
				cardCode: '',//兑换码
				remark1: this.remark,
			}
		},
		methods: {
			open(){
				this.popupCard = true;
			},
			close(){
				this.popupCard = false;
				// this.cardCode = '';
			},
			clear(){
				this.remark1 = ''
			},
			handleInput(e) {
				console.log(e.detail.value,'哈哈哈')
			        this.remark1 = e.detail.value;
			      },
			submit(){
				// this.audioTitle1 = this.audioTitle;
				if(this.remark1 == ''){
					uni.showToast({
						title: '备注不能为空',
						icon: 'none'
					})
					return
				}
				this.$emit('editSuccess',this.remark1)
			}
			
		}
	}
</script>

<style>
	@import "../../static/css/common.css";
	/* 弹窗 */
	.popup {
		padding: 50rpx 30rpx 77rpx;
		background-image: linear-gradient(0deg, #f5f5f5 0%, #dbfff5 100%);
		border-radius: 20rpx;
		width: 552rpx;
	}
	
	.pop-title {
		margin-left: 7rpx;
		color: #333333;
		font-size: 36rpx;
		font-family: Adobe Heiti Std;
		line-height: 34rpx;
		margin-bottom: 20rpx;
	}
	
	.pop-card-type {
		padding: 32rpx 54rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		height: 92rpx;
	}
	.pop-input {
		width: 80%;
		font-size: 28rpx;
		  font-family: PingFang SC;
		  font-weight: 500;
		  color: #98a0a9;
		  text-align: center;
	}
	.pop-placeholder {
		font-size: 28rpx;
		  font-family: PingFang SC;
		  font-weight: 500;
		  color: #98a0a9;
	}
	.pop-text {
		font-size: 28rpx;
		  font-family: PingFang SC;
		  font-weight: 500;
		  color: #98a0a9;
		  margin-right: 6rpx;
	}
	
	.pop-card-num {
		padding: 32rpx 0;
		background-color: #ffffff;
		border-radius: 8rpx;
		width: 100%;
		height: 92rpx;
	}
	
	.pop-down-icon {
		width: 14rpx;
		height: 9rpx;
	}
	.pop-xiaohao {
		margin-left: 20rpx;
		  margin-top: 37rpx;
		  color: #666666;
		 font-size: 30rpx;
		  font-family: Adobe Heiti Std;
		  line-height: 29rpx;
	}
	.pop-bottom {
		margin-top: 48rpx;
		
	}
	.pop-bt-btn1 {
		  background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
		  border-radius: 34rpx;
		  width: 227rpx;
		  height: 68rpx;
		   font-size: 30rpx;
		    font-family: Adobe Heiti Std;
		    line-height: 68rpx;
			color: #ffffff;
			text-align: center;
	}
	.pop-bt-btn2 {
		  background-color: #ffffff;
		  border-radius: 34rpx;
		  width: 227rpx;
		  height: 68rpx;
		  font-size: 30rpx;
		    font-family: Adobe Heiti Std;
		    line-height: 68rpx;
			color: #9da4b1;
			text-align: center;
	}

</style>
